<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:composition template="home2.xhtml" >
        <ui:define name="css" >
            <h:outputStylesheet library="css" name="amigo.css" />
        </ui:define>
        <ui:define name="title" >
            <h:outputText value="Perfil de #{usuarioMB.amigo.nome}" /> 
        </ui:define>
        <ui:define name="pessoal" >
            <h:form prependId="false" >
                <p:panel id="usuario" styleClass="painel">
                    <p:commandLink onclick="msg.show();" value="Add friends" id="linkaddamigo" rendered="#{not usuarioMB.pagAmigos and not usuarioMB.convPendente and not usuarioMB.solPendente}"/>
                    <p:dialog widgetVar="msg" width="500" height="189" id="dialogPhoto" modal="true" header="Leave a message for your friend" >
                        <h:form prependId="false">
                            <f:facet name="header" >Adicionar amigo</f:facet>
                            <h:outputLabel value="Leave a message" for="message" />
                            <br /><p:inputTextarea id="message" value="#{usuarioMB.msgConvite}" />
                            <p:watermark for="message" value="Type a message" />
                            <br /><p:commandButton value="Send" action="#{usuarioMB.addAmigo}" oncomplete="msg.hide();"/>
                            <p:commandButton type="button" onclick="msg.hide();" value="Cancel" />
                        </h:form>
                    </p:dialog>

                    <h:outputLabel value="#{usuarioMB.amigo.mensagem}"  title="Mensagem do perfil" />
                    <br />
                    <p:graphicImage width="128px" height="128px" style="top: 0px;" value="#{usuarioMB.amigo.fotoPerfil}" id="photoProfile" />
                    <br />
                    <h:outputLabel value="#{usuarioMB.amigo.nome} #{usuarioMB.amigo.sobrenome}" />
                    <br />
                    <h:outputLabel value="#{usuarioMB.data}" />
                    <br />
                    <h:outputLabel value="#{usuarioMB.amigo.cidade}" />
                    <br />
                    <h:outputLabel value="#{usuarioMB.amigo.estado} - #{usuarioMB.amigo.pais}" />
                    <p:panel id="linksamigo" >
                        <h:link value="Fotos" outcome="home2" />
                        <br />
                        <h:link value="Perfil" outcome="home2" />
                        <br />
                        <h:link value="Mensagens" outcome="home2" />
                        <br />
                    </p:panel>
                    <p:commandLink id="showDialogButton" value="Remove friends" rendered="#{usuarioMB.pagAmigos}" onclick="confirmation.show()"/> 
                    <h:outputLabel value="Invitation pending" rendered="#{usuarioMB.convPendente or usuarioMB.solPendente}"/>

                    <p:confirmDialog id="confirmDialog" message="Are you sure?"  
                                     header="Remove friend?" severity="alert" widgetVar="confirmation" >  
                        <p:commandButton value="Yes" action="#{usuarioMB.remAmigo}" oncomplete="confirmation.hide()"/>
                        <p:commandButton value="No" type="button" onclick= "confirmation.hide()"/>

                    </p:confirmDialog>
                </p:panel>
            </h:form>
        </ui:define>
        <ui:define name="content" >
            <p:panel styleClass="painel centro" id="centro">
                <h:form prependId="false" id="form">
                    <p:dataTable emptyMessage="Você não possui atualizações" id="atualizacoes" value="#{usuarioMB.atsAmigos}" var="atualizacao" paginator="true" rows="10"  
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                                 paginatorPosition="bottom" paginatorAlwaysVisible="false"
                                 >
                        <f:facet name="header" >
                            Atualizações
                        </f:facet>
                        <p:column>
                            <p:panel id="panelAtl" >
                                <p:graphicImage id="imgAtl" value="#{atualizacao.userPublica.fotoPerfil}" width="35px" height="35px" />
                                <p:panel styleClass="painelAtl">
                                    <h:outputLabel value="#{atualizacao.userPublica.nome} #{atualizacao.userPublica.sobrenome}" />
                                    <br /><h:outputLabel value="#{atualizacao.dataAtualiza}" />
                                    <br /><h:outputText value="#{atualizacao.alvo}" />
                                </p:panel>
                            </p:panel>
                        </p:column>
                    </p:dataTable>
                </h:form>                    
            </p:panel>
        </ui:define>
        <ui:define name="direita" >
            <p:panel id="amigos" >
                <h:form prependId="false" style="width: 100%">
                    <p:dataTable emptyMessage="Você não possui atualizações" id="amigos_datatable" value="#{usuarioMB.amigo.amigos}" var="amigo" paginator="true" rows="10"  
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                                 paginatorPosition="bottom" paginatorAlwaysVisible="false"
                                 >
                        <f:facet name="header">
                            Amigos
                        </f:facet>
                        <p:column >
                            <p:panel styleClass="painel_amigos" >
                                <p:graphicImage value="#{amigo.fotoPerfil}" width="45px" height="45px"/>
                                <br />
                                <p:panel styleClass="usNome">
                                    <p:commandLink value="#{amigo.nome}" action="#{usuarioMB.perfilAmigo}" >
                                        <f:setPropertyActionListener target="#{usuarioMB.amigo}" value="#{amigo}" />
                                    </p:commandLink>
                                </p:panel>
                            </p:panel>
                        </p:column>
                    </p:dataTable>
                </h:form>
            </p:panel>
        </ui:define>
    </ui:composition>
</html>